<template>
  <div>
    <van-nav-bar
        title="项目详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img src="https://pro-wjy.oss-cn-beijing.aliyuncs.com/2024/10/31/11896f1119d943e8879b2bc9f1e8792c.jpg" alt="Image 2">
      </van-swipe-item>
      <van-swipe-item>
        <img src="https://pro-wjy.oss-cn-beijing.aliyuncs.com/2024/12/10/517470981b9a437ca69ae75bd340df6dlazy%7E%E5%92%A9%E5%92%A9%20.jpg" alt="Image 3">
      </van-swipe-item>
      <van-swipe-item>
        <img src="https://pro-wjy.oss-cn-beijing.aliyuncs.com/2024/12/09/76f46e357c054039bb93892a056820574.jpg" alt="Image 4">
      </van-swipe-item>
      <van-swipe-item>
        <img src="https://pro-wjy.oss-cn-beijing.aliyuncs.com/jyyx/2024/7/31/ad0a1153ea924f6b9211486108ef8c9a.jpg" alt="Image 5">
      </van-swipe-item>
    </van-swipe>

    <div class="order-details-container">
        <div>
<!--          <span class="order-choose"></span>-->
          <span class="appointment-time">￥{{ services.price }} <van-tag color="#2fff00" class="order-choose">标签已有{{ services.choose }}选择</van-tag></span><br>
          <span class="patient-info" ><van-icon name="clock-o" />服务时间:{{ services.minutes }}分钟</span>
        </div>
        <span class="order-title">{{ services.name }}</span><br>
        <span class="hospital">{{ services.effect }}</span>
    </div>

    <div class="tab-container">
      <!-- 使用van-tabs组件 -->
      <van-tabs v-model="activeTab">
        <!-- 循环生成标签页标题 -->
        <van-tab v-for="(item, index) in tabTitles" :key="index" :title="item">
          <!-- 项目介绍标签页内容 -->
          <template v-if="index === 0">
            <h3>项目介绍</h3>
            <h4>·按摩部位</h4>
            <p>{{ services.place }}</p>
            <h4>·功效</h4>
            <p>{{ services.efficacy }}</p>
          </template>
          <!-- 禁忌说明标签页内容 -->
          <template v-else-if="index === 1">
            <h3>禁忌说明</h3>
            <h4>·功效</h4><br>
            <p>{{ services.illustrate }}</p>
          </template>
          <!-- 下单须知标签页内容 -->
          <template v-else-if="index === 2">
            <h3>下单须知</h3>
            <h4>·功效</h4><br>
            <p>{{ services.notice }}</p>
          </template>
        </van-tab>
      </van-tabs>
    </div>

  </div>
</template>

<script>
import axios from "axios";
import { useRouter } from 'vue-router';

export default {
  data() {
    return {
      tabTitles: ['项目介绍', '禁忌说明', '下单须知'],
      activeTab: 0,
      services: {},
      id: null
    };
  },
  created() {
    this.id = this.$route.query.id;
    console.log('id为'+this.id);
    if (this.id) {
      this.findById(this.id);
    }
  },
  methods: {
    onClickLeft() {
      console.log('onClickLeft called');
      this.$router.go(-1); // 使用 Vue Router 的 go 方法
    },
    getIdFromPath() {
      const path = window.location.hash;
      const parts = path.split('/');
      if (parts.length > 2) {
        return parts[2];
      }
      return null;
    },
    findById(id) {
      console.log(id)
      if (id) {
        axios.get(`http://localhost:10086/homepage/findById/${id}`)
            .then(res => {
              console.log(res.data.data);
              this.services = res.data.data;
            });
      } else {
        console.error('没有有效的id值，无法进行查询');
      }
    },
    back() {
      window.history.back();
    },
    detail(itemId) {
      this.$router.push({ path: `/detail/${itemId}` });
    }
  }
};
</script>

<style scoped>
.my-swipe {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.order-details-container {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  height: 135px;
}
.appointment-time {
  color: red;
  font-size: 30px;
}
.order-choose {
  font-size: 20px;
  float: right;
  margin-top: 10px;
}
.order-title{
  font-size: 35px;
}
.hospital{
  font-size: 15px;
}
.tab-container {
  padding-right: 10px;
}
</style>
